<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>主页欢迎</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script th:src="@{../../js/jquery-3.5.1.min.js}" type="text/javascript"></script>
    <script th:src="@{../../js/echarts.min.js}"></script>
    <style>
        body {
            background-size: 100% 100%;
            margin: 0 auto;
            border: 1px solid #ccc;
            background: #efffda;
            opacity: 1;
        }
    </style>
</head>
<body>
<h1 style="text-align: center">校园后勤基础信息台账</h1>
<hr class="hr15"/>
<div id="graph1" style="width: 100%; height: 300px"></div>
<hr class="hr15"/>
<div id="graph2" style="width: 100%; height: 300px"></div>
<hr class="hr15"/>
<div id="graph3" style="width: 100%; height: 300px"></div>
<hr class="hr15"/>
<div id="graph4" style="width: 100%; height: 300px"></div>
<script>

    $(function () {
        $.ajax({
            url: "/rbi",
            type: "post",
            success: function (data) {
                console.log(data);

                var graph1 = echarts.init(document.getElementById("graph1"));

                var option1 = {
                    title: {
                        text: '后勤基础数据(2020年4月更新)'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: data.location
                    },
                    grid: {
                        left: '3%',
                        right: '4',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['占地面积(亩)', '建筑总面积(亩)', '绿化占地面积(㎡)', '绿地面积(平方米)', '教室座位数(个)',
                            '食堂座位数(个)', '图书馆面积(㎡)', '行政办公面积(㎡)']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: data[0].location,
                            type: 'line',
                            // stack: '总量',
                            data: [
                                data[0].area,
                                data[0].struArea,
                                data[0].greeningArea,
                                data[0].greenArea,
                                data[0].seatNum,
                                data[0].dineNum,
                                data[0].libArea,
                                data[0].officeArea
                            ]
                        },
                        {
                            name: data[1].location,
                            type: 'line',
                            stack: '总量',
                            data: [
                                data[1].area,
                                data[1].struArea,
                                data[1].greeningArea,
                                data[1].greenArea,
                                data[1].seatNum,
                                data[1].dineNum,
                                data[1].libArea,
                                data[1].officeArea
                            ]
                        }
                    ]
                };

                graph1.setOption(option1);
            }
        });
        $.ajax({
            url: "/tebi",
            type: "post",
            success: function (data) {
                console.log(data);

                var graph2 = echarts.init(document.getElementById("graph2"));

                var option2 = {
                    title: {
                        text: '教学评估基础数据(2020年4月更新)'
                    },
                    legend: {},
                    tooltip: {},
                    dataset: {
                        source: [
                            data.locations,
                            data.aveStuAreas,
                            data.aveStuStayAreas,
                            data.hunStuSeatNums,
                            data.hunStuDineNums
                        ]
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    xAxis: {type: 'category'},
                    yAxis: {},
                    // Declare several bar series, each will be mapped
                    // to a column of dataset.source by default.
                    series: [
                        {type: 'bar'},
                        {type: 'bar'}
                    ]
                };

                graph2.setOption(option2);
            }
        });
        $.ajax({
            url: '/gsbi',
            type: 'post',
            success: function (data) {
                console.log(data);

                var graph3 = echarts.init(document.getElementById("graph3"));

                var option3 = {
                    title: {
                        text: '绿色校园基础数据(2020年4月更新)'
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    legend: {},
                    tooltip: {},
                    dataset: {
                        source: [
                            data.locations,
                            data.greenCoverRatios,
                            data.greenRatios,
                            data.plotRatios
                        ]
                    },
                    series: [{
                        type: 'pie',
                        radius: '50%',
                        center: ['25%', '50%']
                    }, {
                        type: 'pie',
                        radius: '50%',
                        center: ['75%', '50%'],
                        encode: {
                            itemName: data.locations[0],
                            value: data.locations[2]
                        }
                    }]
                };
                graph3.setOption(option3);
            }
        });
        $.ajax({
            url: '/ssbi',
            type: 'post',
            success: function (data) {
                console.log(data);

                var graph4 = echarts.init(document.getElementById("graph4"));

                var option4 = {
                    title: {
                        text: '节约型校园基础数据(2020年4月更新)'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: [
                            data[0].location,
                            data[1].location
                        ]
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: [
                                '再生水量(m³)',
                                '再生水利用率(%)',
                                '年用水量(m³)'
                            ]
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: data[0].location,
                            type: 'line',
                            // stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: [
                                data[0].reWater,
                                data[0].reWaterUseRatio,
                                data[0].yearUseWater
                            ]
                        },
                        {
                            name: data[1].location,
                            type: 'line',
                            // stack: '总量',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: [
                                data[1].reWater,
                                data[1].reWaterUseRatio,
                                data[1].yearUseWater
                            ]
                        },
                    ]
                };
                graph4.setOption(option4);
            }
        });
    });
</script>
</body>
</html>